import "./public-path";
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import zhCn from "element-plus/es/locale/lang/zh-cn";

import "./index.scss";
import { XdeFileUploader } from "@/components/xde-ui-plus/xde-ui.es.js";
import "@/components/xde-ui-plus/style.css";
import request from "./utils/request";
const pinia = createPinia();

import type { App as VueApp } from "vue";

// 扩展Window接口以添加阿里乾坤的属性
declare global {
  interface Window {
    __POWERED_BY_QIANKUN__?: boolean;
  }
}

let instance: VueApp | null = null;
function render(props: Record<string, any> = {}) {
  const { container } = props;
  instance = createApp(App);
  instance.config.globalProperties.$request = request;
  instance.use(ElementPlus, { locale: zhCn });
  // 注册Pinia
  instance.use(pinia);
  // 注册路由
  instance.use(router);
  // 通过app实例提供router
  instance.provide("router", router);
  instance.component("XdeFileUploader", XdeFileUploader);
  instance.mount(container ? container.querySelector("#root") : "#root");
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log("[vue] vue app bootstraped微服务渲染成功");
}
export async function mount(props: Record<string, any>) {
  console.log("[vue] props from main framework", props);
  render(props);
}
export async function unmount() {
  if (instance) {
    instance.unmount();
    instance = null;
  }
}
